<!-- Input Component -->
<template>
  <div id="todoInput">
    <input
      type="text"
      v-model="value"
      id="insertTodo"
      placeholder="Please record your todo"
      @input="handelInput"
      @keydown.enter="handelEnter"
    />
    <div v-if="on" @click="handelClear">
      <el-icon :size="60" class="close"><CircleCloseFilled /></el-icon>
    </div>
    <el-alert
      @close="handelClose"
      v-if="warning"
      style="margin-top: 5px"
      title="当前todo已存在或为空，添加失败"
      type="warning"
      show-icon
    />
  </div>
</template>

<script setup>
import { ref , watchEffect } from "vue";
import { useTodoStore } from "../store/useTodoStore.js";
/**
 * 1.当输入框的内容长的不为空时，显示清空按钮，点击可清空输入框
 * 2.enter时判断当前内容是否已经上传过，如果没有就创建新的todo
 *  ·使用pinia来管理todo数据
 * 3·点击all时显示所有，点击done时显示 isDone为true的
 * 4.啦啦啦
 **/
const TodoStore = useTodoStore();
let value = ref("");
let on = ref(false);
let warning = ref(false);
function handelInput() {
  if (value.value.trim().length > 0) {
    on.value = true;
  } else { 
    warning.value=false
  }
}

function handelClear() {
  value.value = "";
  on.value = false;
  warning.value=false
  handelClose();
}

function handelEnter() {
  let todo = {
    value: value.value,
    isDone: false,
  };
  value.value=''
  let result = TodoStore.todos.filter(
    (item) => item.value.trim() == todo.value.trim()
  );

  if (todo.value.trim() && !result.length) {
    //在value有值的情况下才可以传过去，并且不重复
    TodoStore.addTodo(todo);
  } else {
    warning.value = true;
  }
}

function handelClose() {
  warning.value = false;
}

</script>

<style scoped>
#todoInput {
  width: 400px;
  height: 60px;
  border-radius: 30px;
  margin: 0 auto;
  position: relative;
}
#insertTodo {
  width: 400px;
  height: 60px;
  border-radius: 30px;
  padding-left: 20px;
  padding-right: 60px;
  font-size: larger;
  box-shadow: 0px 5px 15px #e4dddd;
  border: none;
  outline: none;
  transition: all 0.5s linear;
}
#insertTodo:focus {
  background-color: rgb(193, 218, 218);
}
.close {
  position: absolute;
  right: 0;
  z-index: 20;
  width: 60px;
  height: 60px;
  top: 0px;
}
</style>
